.tab-navbar {
	display: flex;
	overflow: hidden;
	flex-direction: column-reverse;
	border-radius: 10px;
	width: 300px;
	height: 400px;
	nav {
		display: flex;
		height: 40px;
		background-color: #f0f0f0;
		line-height: 40px;
		text-align: center;
		label {
			flex: 1;
			cursor: pointer;
			transition: all 300ms;
			&.active {
				background-color: #3c9;
				color: #fff;
			}
		}
	}
	main {
		flex: 1;
		ul {
			--tab-index: 0;
			--tab-width: calc(var(--tab-count) * 100%);
			--tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
			display: flex;
			flex-wrap: nowrap;
			width: var(--tab-width);
			height: 100%;
			transform: translate3d(var(--tab-move), 0, 0);
			transition: all 300ms;
		}
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			background-color: var(--bg-color);
			font-weight: bold;
			font-size: 20px;
			color: #fff;
		}
	}
}